<!-- 顶部导航栏设置页面 -->
<template>
	<view class="index-setting">
		
		<view class="index-setting__header flex-column">
			<view class="index-setting__header-title-box flex">
				<text class="index-setting__header-title">服务栏设置</text>
				<image src="/static/cancel.png" mode="aspectFill" class="index-setting__header-icon" @click="navigateBack"></image>
			</view>
			<text class="index-setting__header-sub-title">可设置顶部服务栏</text>
		</view>
		
		<view class="index-setting__items">
			
			<setting-item
			:item="sp"
			:is-set="false"
			></setting-item>
			
			<setting-item
			v-for="item in settingItems"
			:key="item.id"
			:item="item"
			></setting-item>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import settingItem from '@/components/settingItem/settingItem.vue';


const sp = ref({
	title:'刷最新'
})

const settingItems = ref([
	{title:'证书查询',id:'settingItem01'},
	{title:'订阅',id:'settingItem02'},
	{title:'服务机构',id:'settingItem03'},
	{title:'赛事',id:'settingItem04'},
	{title:'活动',id:'settingItem05'},
	{title:'培训',id:'settingItem06'},
	{title:'课程',id:'settingItem07'},
	{title:'直播',id:'settingItem08'},
	{title:'视频',id:'settingItem09'},
	{title:'赛事排行榜',id:'settingItem10'},
	{title:'动动约',id:'settingItem011'},
	{title:'商城',id:'settingItem012'},
	{title:'资讯',id:'settingItem013'}
])

function navigateBack(){
	uni.navigateBack()
}
</script>



<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
	}
	
	.flex-column{
		display: flex;
		flex-direction: column;
	}
	.index-setting{
		&__drawer{
			width: 560rpx;
		}
		
		&__header{
			// width: 95%;
			width: 560rpx;
			border-bottom: 2rpx solid #f7f7f7;
			box-sizing: border-box;
			padding-left: 50rpx;
			padding-right: 20rpx;
			margin: 0 auto;
			&-title-box{
				justify-content: space-between;
			}
			
			&-title{
				font-size: 40rpx;
				margin-top: .3em;
				margin-bottom: .3em;
			}
			
			&-icon{
				width: 40rpx;
				height: 40rpx;
			}
			
			&-sub-title{
				font-size: 32rpx;
				color: #aa2b22;
				margin-bottom: .5em;
			}
		}
		
		&__items{
			width: 100%;
			height: 100%;
		}
		

	}
</style>

